<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>落地页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
        </div>
        <div class="container">
            <div class="centerBtn">
                <el-button type="primary" size="medium" @click="addImage"><i class="el-icon-plus"></i>上传图片</el-button>
                <el-button type="primary" size="medium" @click="addGround"><i class="el-icon-plus"></i>生成落地页</el-button>
            </div>

            <!--<div>-->
                <!--<el-button @click="sendAjax()">发送请求</el-button>-->
                <!--<div id="box"></div>-->
            <!--</div>-->
        </div>



        <!-- 上传图片 -->
        <el-dialog :title="storeTitle" :visible.sync="addImageDialog" width="600px">
            <el-form ref="form" :model="form"  label-width="120px">
                <el-form-item label="图片：">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-change="onUploadChange"
                        :file-list="fileList"
                        list-type="picture"
                        :auto-upload="false"
                        :limit=1>
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addImageDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="图片路径" :visible.sync="ImageUrlDialog" width="600px">
            <el-button type="primary" @click="copyImage">复制路径</el-button>
            <p style="margin-top: 20px">
                <span>图片路径为：</span>
                <span>{{imgUrl}}</span>
            </p>
            <input type="text" :value="imgUrl" id="copyObj" style="opacity: 0">
            <span slot="footer" class="dialog-footer">
                <el-button @click="ImageUrlDialog = false">取 消</el-button>
                <el-button type="primary" @click="ImageUrlDialog = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--生成落地页-->
        <el-dialog :title="storeTitle" :visible.sync="addGroundDialog" width="600px">
            <el-form ref="groundform" :model="groundform" label-width="120px">
                <el-form-item label="落地页名称：">
                    <el-input v-model="groundform.name" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="落地页内容：">
                    <textarea v-model="groundform.content" class="areaStyle"></textarea>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addGroundDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveGround">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="落地页路径" :visible.sync="GroundUrlDialog" width="600px">
            <el-button type="primary" @click="copyGround">复制路径</el-button>
            <p style="margin-top: 20px">
                <span>落地页路径为：</span>
                <span>{{groundUrl}}</span>
            </p>
            <input type="text" :value="groundUrl" id="copyGround" style="opacity: 0">
            <span slot="footer" class="dialog-footer">
                <el-button @click="GroundUrlDialog = false">取 消</el-button>
                <el-button type="primary" @click="GroundUrlDialog = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        attachments,
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import CryptoJS from 'crypto-js/crypto-js';
    import {base64} from '../tool/tool';
    export default {
        data() {
            return {
                storeTitle:'',
                addImageDialog:false,
                ImageUrlDialog: false,
                imgUrl: '',
                fileList: [],
                fileImg: '',
                trueForm:{
                },
                form: {
                    //图
                    uploadImages:'',
                },
                addGroundDialog:false,
                GroundUrlDialog: false,
                groundform: {
                    name: '',
                    content: '',
                },
                groundUrl: '',
                trueForm:{}
            }
        },
        created() {
        },
        computed: {
        },
        methods: {
            // sendAjax(){
            //     var xhr = new XMLHttpRequest();
            //     xhr.withCredentials = true;
            //
            //     xhr.addEventListener("readystatechange", function () {
            //         if (this.readyState === 4) {
            //             console.log(this.responseText);
            //         }
            //     });
            //
            //     xhr.open("POST", "http://localhost:8090/banners");
            //     xhr.setRequestHeader("Access-Token", "7ec54c01-2965-466b-945e-9207fbc5c6b3");
            //     xhr.setRequestHeader("Content-Type", "application/json");
            //     xhr.setRequestHeader("cache-control", "no-cache");
            //     xhr.setRequestHeader("Postman-Token", "0a2331b5-a039-4543-b9db-052df207529c");
            //
            //     xhr.send();
            // },
            addImage(){
                this.addImageDialog = true;
                this.storeTitle = '图片上传';
                this.form = {};
                this.form = {
                    uploadImages:'',
                };
                this.fileList = [];
                this.fileImg = '';
            },
            //上传图片事件
            onUploadChange(file) {
                // console.log(file)
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        that.form.uploadImages = res.data.content.imgId;
                        that.imgUrl = that.$ajaxBase + 'attachments/download?id=' + that.form.uploadImages;
                    })
                })
            },
            saveEdit(){
                this.addImageDialog = false;
                this.fileList = [];
                this.fileImg = '';
                this.ImageUrlDialog = true;
            },
            copyImage(){
                let url = document.querySelector('#copyObj');;
                url.select();
                document.execCommand("Copy");
                this.$message.success("复制成功")
            },
            //落地页
            addGround(){
                this.storeTitle = '落地页生成';
                this.addGroundDialog = true;
                this.groundform = {
                    name: '',
                    content: '',
                }
            },
            saveGround(){
                let text = this.groundform.content;
                let wordArray = CryptoJS.enc.Utf8.parse(text);
                let base64 = CryptoJS.enc.Base64.stringify(wordArray);
                // console.log('base64Encrypt = ', base64);
                this.trueForm = {
                    key: this.groundform.name,
                    value: base64,
                }
                storeAsPost(this.trueForm,'/system/properties/systemProperty').then(res=>{
                    // console.log(res,22222)
                    this.addGroundDialog = false;
                    this.GroundUrlDialog = true;
                    this.groundUrl = this.$ajaxBase + 'system/properties/html/' + res.data.content.key.key;
                });
            },
            copyGround(e){
                let url = document.querySelector('#copyGround');;
                url.select();
                document.execCommand("Copy");
                this.$message.success("复制成功")
            },
        }
    }

</script>

<style>
    .store{
        position: relative;
    }
    .store .store_title{
        height: 40px;
    }
    .store .store_title div{
        line-height: 40px;
    }
    .store .mainBtn{
        position: absolute;
        right: 0;
        top:0
    }
    .centerBtn{
        width: 80%;
        margin: 20px auto;
        text-align: center;
    }
    .areaStyle{
        width: 400px;
        height: 100px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }
</style>
